<template>
  <view class="su-cell-group">
    <nut-cell-group :title="option.title" :desc="option.desc">
      <template #title="scope" v-if="$slots.title">
        <slot v-bind="scope" name="title" />
      </template>
      <template #desc="scope" v-if="$slots.desc">
        <slot v-bind="scope" name="desc" />
      </template>
      <nut-cell
        v-for="column in columnOption"
        :key="column.prop"
        :title="column.title"
        :subTitle="column.subTitle"
        :desc="column.desc"
        :descTextAlign="column.descTextAlign || option.descTextAlign"
        :isLink="column.isLink"
        :roundRadius="column.roundRadius || option.roundRadius"
        :url="column.url"
        :to="column.to"
        :replace="column.replace"
        :center="column.center || option.center"
        :size="column.size || option.size"
        :class="column.className"
        @click="column.click"
        :style="titleStyle"
      >
        <template #icon>
          <slot v-bind="column" :data="data" name="cell-icon" />
        </template>
        <template #default>
          <slot v-bind="column" :data="data" name="cell-default" />
        </template>
        <template #link>
          <slot v-bind="column" :data="data" name="cell-link" />
        </template>
        <template #title>
          <slot v-bind="column" :data="data" name="cell-title" />
        </template>
        <template #desc>
          <slot v-bind="column" :data="data" name="cell-desc" />
        </template>
      </nut-cell>
    </nut-cell-group>
  </view>
</template>

<script setup>
import { useVModel } from '@vueuse/core';
defineOptions({
  name: 'SuCellGroup'
});
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  },
  option: {
    type: Object,
    default: () => ({})
  }
});
const { option } = props;
const emit = defineEmits(['update:modelValue']);
const data = useVModel(props, 'modelValue', emit);
const columnOption = computed(() => {
  return option.column || [];
});
</script>

<style lang="scss">
.su-cell-group {
  .nut-cell-group__wrap {
    margin: 0;
  }
  .nut-cell {
    padding: 15px 20px;
    box-shadow: 0px 1px 7px 0px rgb(237, 238, 241);
  }
}
</style>
